<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../vue.js"></script>

</head>
<body>
    
    <div id="app">
        <!-- 复选框单独使用的时候--我们希望我们收集的是布尔值,得到用户是否选中了当前的框 -->
        是否同意：{{isAgree}}
        <input type="checkbox" v-model="isAgree" />
        <br>
        <br>
        
        <h1>
            <!-- 使用数组来接收相同属性的值 -->
            <!-- 复选框多个一起使用的时候--我们希望收集的每一个复选框的值,所以要使用数组 -->
            武汉<input type="checkbox" value="武汉" v-model="hobby">
            孝感<input type="checkbox" value="孝感" v-model="hobby">
            湖北<input type="checkbox" value="湖北" v-model="hobby">
        </h1>
    </div>

    <script>
        Vue.config.productionTip = false;
        const vm = new Vue({
            el:'#app',
            data(){
                return{
                    isAgree:false,
                    hobby:[]
                }
            }
        })

    </script>
</body>
</html>